<template>
		<n-modal-provider>
			<n-dialog-provider>
				<div class="layout-container">
					<!-- 左侧菜单 -->
					<aside class="sidebar">
						<div class="logo">
							<h2>微信公众号管理系统</h2>
						</div>
						<nav>
							<ul>
								<li v-for="item in menuItems" :key="item.path">
									<NuxtLink
										:to="item.path"
										class="menu-item"
										:class="{ active: isActive(item.path) }"
									>
										{{ item.name }}
									</NuxtLink>
								</li>
							</ul>
						</nav>
					</aside>

					<!-- 右侧内容区 -->
					<main class="content">
						<div class="header">
							<h1>{{ currentPageTitle }}</h1>
						</div>
						<div class="page-container">
							<slot />
						</div>
					</main>
				</div>
			</n-dialog-provider>
		</n-modal-provider>
</template>

<script setup lang="ts">
	import { ref, computed } from "vue";
	import { useRoute } from "vue-router";
	import { NDialogProvider } from "naive-ui";

	const route = useRoute();

	// 菜单项配置
	const menuItems = ref([
		{
			name: "用户管理",
			path: "/wechat-subscriber",
		},
		{
			name: "标签管理",
			path: "/wechat-tag",
		},
		{
			name: "菜单管理",
			path: "/menu",
		},
		{
			name: "素材管理",
			path: "/wechat-material",
		},
		{
			name: "模板消息管理",
			path: "/template-message",
		},
	]);

	// 当前页面标题
	const currentPageTitle = computed(() => {
		const item = menuItems.value.find((item) => item.path === route.path);
		return item ? item.name : "首页";
	});

	// 检查路由是否激活
	const isActive = (path: string) => {
		return route.path === path;
	};
</script>

<style scoped>
	.layout-container {
		display: flex;
		height: 100vh;
		overflow: hidden;
	}

	.sidebar {
		width: 220px;
		background-color: #fff;
		border-right: 1px solid #e5e5e5;
		display: flex;
		flex-direction: column;
	}

	.logo {
		padding: 20px;
		border-bottom: 1px solid #e5e5e5;
		text-align: center;
	}

	.logo h2 {
		font-size: 16px;
		color: #333;
		margin: 0;
	}

	nav {
		flex: 1;
		padding: 20px 0;
	}

	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.menu-item {
		display: block;
		padding: 12px 20px;
		color: #666;
		text-decoration: none;
		transition: all 0.3s;
	}

	.menu-item:hover {
		background-color: #f5f5f5;
		color: #1890ff;
	}

	.menu-item.active {
		background-color: #e6f7ff;
		color: #1890ff;
		border-right: 3px solid #1890ff;
	}

	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.header {
		padding: 16px 24px;
		background-color: #fff;
		border-bottom: 1px solid #e5e5e5;
		flex-shrink: 0;
	}

	.header h1 {
		font-size: 18px;
		color: #333;
		margin: 0;
	}

	.page-container {
		flex: 1;
		padding: 24px;
		background-color: #f5f5f5;
		overflow-y: auto;
	}
</style>